<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系统信息</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
</head>

<style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    #box1{
        width:1200px;
        height: 40px;
        border-bottom: 1px solid #E4E4E4;
    }
    #box1 p{
        line-height: 40px;
    }
    #box{
        width:1200px;
        height: 604px;
        margin: 0 auto;
        margin-top: 20px;
        border: 1px solid #E4E4E4;
    }
    #ul2{
        float: right;
    }
    #ul1{
        float: left;
    }
    #ul1 li{
        width:598px;
        height: 54px;
        line-height: 54px;
        text-indent: 22px;
        border-bottom: 1px solid #E4E4E4;
        border-right: 1px solid #E4E4E4;
    }
    #ul2 li{
        width:598px;
        height: 54px;
        line-height: 54px;
        text-indent: 22px;
        border-bottom: 1px solid #E4E4E4;
    }
    #bigBox{
        width:1200px;
        margin: 0 auto;
    }
</style>
<body>
    <div id="bigBox">
        <div id="box1">
            <p>系统信息</p>
            <div id="box">
                <ul id="ul1">
                    <li>Mysql版本</li>
                    <li>服务器名称</li>
                    <li>服务器地址</li>
                    <li>端口号</li>
                    <li>操作系统</li>
                    <li>运行环境</li>
                    <li>IE名称</li>
                    <li>IE版本</li>
                    <li>连接超时时间</li>
                    <li>读取超时时间</li>
                    <li>上传大小限制</li>
                </ul>
                <ul id="ul2">
                    <li id="mySql">5.7.35</li>
                    <li id="serverName">60.205.207.84.22122</li>
                    <li id="serverAddress">0:0:0:0:0:0:0:1</li>
                    <li id="portNumber">8081</li>
                    <li id="operatingSystem">Windows 10</li>
                    <li>1.8.0_261,Oracle Corporation,http://java.oracle.com/</li>
                    <li id="ieName">Chrome 9</li>
                    <li id="ieVersion">95.0.4638.54</li>
                    <li>600ms</li>
                    <li>1500ms</li>
                    <li>500mb</li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        layui.use(["jquery"],function () {
            var $ = layui.jquery;

            $.ajax({
                url:'/Information/getInformation',
                methos:'post',
                dataType:'json',
                success:function(data){
                    /*mysql版本*/
                    $("#mySql").text(data.data.mysqlVersion);
                    /*服务器名称*/
                    $("#serverName").text(data.data.serverName);
                    /*服务器地址*/
                    $("#serverAddress").text(data.data.serverAddress);
                    /*/!*端口号*!/*/
                    $("#portNumber").text(data.data.portNumber);
                    /*操作系统*/
                    $("#operatingSystem").text(data.data.operatingSystem);
                    /*浏览器名称*/
                    $("#ieName").text(data.data.ieName);
                    /*浏览器版本*/
                    $("#ieVersion").text(data.data.ieVersion);

                }
            })
        })
    </script>
</body>
</html>